HTML - 表格

发表于   |   分类于   |  

HTML 表格主要由以下标签组成：

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性

代码演示如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--创建两行三列的表格-->
<table border="1" width="50%">
    <caption>前端工程师平均工资</caption>
    <tr>
        <th>城市</th> <th>2014</th> <th>2014</th> <th>2015</th> <th>2016</th>
    </tr>
    <tr>
        <th>城市</th> <th>上半年</th> <th>下半年</th> <th>2015</th> <th>2016</th>
    </tr>
    <tr>
        <td>北京</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
    </tr>
    <tr>
        <td>上海</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
    </tr>
    <tr>
        <td>合计</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
    </tr>
</table>

表格结构标签

在 HTML 中，表格的加载时完成后再显示，当表格的内容和结构比较复杂时，这会影响页面打开的速度。这种情况需要借助表格的结构进行优化，通过结构的划分，表格可以分几次加载和显示。

结构 描述
<thead> 定义表格的页眉，主要用于放标题之类的内容
<tbody> 定义表格的主体，主要用于存放数据主体
<tfoot> 定义表格的页脚，主要用于存放表格的脚注

<thead> <tbody> <tfoot> 永远是依次展示，和代码的顺序无关，其常用属性如下：

属性 值 描述
align left、center、right、justify、char 单元格内容水平对齐
valign top、middle、bottom、baseline 单元格内容垂直对齐

代码演示如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--创建两行三列的表格-->
<table border="1" width="50%">
    <caption>前端工程师平均工资</caption>
    <thead>
        <tr>
            <th>城市</th> <th>2014</th> <th>2014</th> <th>2015</th> <th>2016</th>
        </tr>
        <tr>
            <th>城市</th> <th>上半年</th> <th>下半年</th> <th>2015</th> <th>2016</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>北京</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
        <tr>
            <td>上海</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合计</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
    </tfoot>
</table>

table 常用属性

HTML-Table-属性

属性 值 描述
border 像素和百分比 表格边框的宽度
width 像素 表格宽度，支持像素和百分比
align right、left、center 表格对齐方式
bgcolor RGB、Hex、英文名 表格背景颜色
cell-padding 像素和百分比 单元格内边距
cell-spacing 像素和百分比 单元格外边距
frame 属性值 表格外边框显示方式
rules 属性值 表格内边框显示方式
值 描述
void 不显示外侧边框。
above 显示上部的外侧边框。
below 显示下部的外侧边框。
hsides 显示上部和下部的外侧边框。
vsides 显示左边和右边的外侧边框。
lhs 显示左边的外侧边框。
rhs 显示右边的外侧边框。
box 在所有四个边上显示外侧边框。
border 在所有四个边上显示外侧边框。

frame 属性有以下几个值：

值 描述
void 不显示外侧边框
above 显示上部的外侧边框
below 显示下部的外侧边框
hsides 显示上部和下部的外侧边框
vsides 显示左边和右边的外侧边框
lhs 显示左边的外侧边框
rhs 显示右边的外侧边框
box 在所有四个边上显示外侧边框
border 在所有四个边上显示外侧边框

rules 属性有以下几个值：

值 描述
none 没有线条
groups 位于行组和列组之间的线条
rows 位于行之间的线条
cols 位于列之间的线条
all 位于行和列之间的线条

tr 常用属性

属性 值 描述
align left、center、right、justify、char 行内容水平对齐
valign top、middle、bottom、baseline 行内容垂直对齐
bgcolor RGB、Hex、英文名 行的颜色

colspan rowspan 跨行跨列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table bgcolor="pink" cellpadding="10" rules="rows" width="500" frame="vsides" border="1">
    <thead>
        <tr>
            <th colspan="2">1</th> <th>2</th> <th>3</th> <th>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
        <tr>
            <td rowspan="2">data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
        <tr>
            <td>data</td> <td>data</td> <td>data</td> <td>data</td>
        </tr>
    </tbody>
</table>

使用 <colspan> <rowspan> 时，需特别注意，要去除被覆盖的单元格，否则会造成单元格数量错误。

表格嵌套

当表结构很复杂时，有时会用到表格的嵌套，表格嵌套需有完整的表格结构，且必须在 <td> 标签内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table border="1"s cellspacing="0">
    <tr>
        <td>2014</td>
        <td>2014</td>
        <td>2014</td>
    </tr>
    <tr>
        <td>
            <table border="1" cellspacing="0">
                <tr>
                    <td>上半年</td>
                    <td>下半年</td>
                </tr>
                <tr>
                    <td>8000</td>
                    <td>9000</td>
                </tr>
            </table>
        </td>
        <td>10000</td>
        <td>12000</td>
    </tr>
</table>

表格布局

在使用表格布局时，要尽量少使用表格嵌套和跨行跨列，过多的使用会让维护成本变高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
	<!--网页头部内容-->
	<title>使用表格进行网页布局</title>
	<meta http-equiv="Content - Type" content="text/html" charset="utf-8"/>
</head>
<body>
	<table width="100%" bgcolor="#f2f2f2">
		<tr height="80" bgcolor="#14191e"><!--页头-->		
			<td></td>
		</tr>
		<tr height="10"><!--上空行-->
			<td></td>
		</tr>
		<tr><!--主体内容-->
			<td>
				<table align="center" width="1024">
					<tr>
						<td width="240" valign="top"><!--主体内容左侧-->
							<table width="100%" cellspacing="0">
								<tbody align="center" bgcolor="#ffffff">
									<tr>
										<td height="60">1</td>
									</tr>
									<tr>
										<td height="60">2</td>
									</tr>
									<tr>
										<td height="60">3</td>
									</tr>
									<tr>
										<td height="60">4</td>
									</tr>
									<tr>
										<td height="60">5</td>
									</tr>
									<tr>
										<td height="60">6</td>
									</tr>
									<tr>
										<td height="60">7</td>
									</tr>
									<tr>
										<td height="60">8</td>
									</tr>
								</tbody>
							</table>
						</td>
						<td width="20"><!--主体内容空隙-->
						</td>
						<td width="764" bgcolor="#ffffff"><!--主体内容右侧-->
							<p>hello html</p>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr height="10"><!--下空行-->	 
			<td></td>
		</tr>
		<tr height="150" bgcolor="#14191e"><!--页尾-->
			<td></td>
		</tr>
	</table>
</body>
</html>